import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Icon } from "antd"
import "../../Common.less"
import "./index.less"
class commondLine extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            focus: false,
            execvalue: '',
            logs: [],
            execHistory: [],

        }
        this.exec = this.exec.bind(this)
        this.swap = this.swap.bind(this)
    }
    swap(arr, index1, index2) {
        let temp = arr[index1];
        arr[index1] = arr[index2];
        arr[index2] = temp;
        return arr;
    }

    exec(e) {
        const { focus, execHistory, execvalue,execIndex } = this.state
        let len = execHistory.length - 1;
        if(execvalue=="clear"){
            this.setState({
                execIndex:0,
                execvalue:""
            })
            this.props.clearLogs()
        }
        if (e.keyCode == "13") {
            if (focus) {
                let index = execHistory.findIndex(item => item == execvalue)
                if (index != -1) {
                    let newExeHis = this.swap(execHistory, index, len)
                    this.setState({
                        execHistory: newExeHis
                    })
                }
            }
        }
        if (e.keyCode == "38") {
            if (focus) {

                let index = execIndex - 1 >= 0 ? execIndex - 1 : execIndex
                this.setState({
                    execIndex: index,
                    execvalue: execHistory[index]
                })
            }
        }
        if (e.keyCode == "40") {
            if (focus) {

                let index = execIndex + 1 <= len ? execIndex + 1 : execIndex
                this.setState({
                    execIndex: index,
                    execvalue: execHistory[index]
                })

            }
        }
    }
    componentDidMount() {
      
    }
    componentWillUnmount(){
        if(this.st){
            clearTimeout(this.st)
        }
    }
    render() {
        const { execvalue,execIndex } = this.state
        const {logs,execlogs}=this.props;
        
        this.st=setTimeout(()=>{
            if(this.st){
                clearTimeout(this.st)
            }
            this.props.scrollLatest()
            
        },10)
        return (
            <div className="absMiddle commondBox">
                <div>
                    <div className="title absMiddle"><div className="lb absMiddle"></div><div className="absMiddle">命令行</div></div>
                    <div className="ologContent absMiddle">
                        {
                            execlogs.map((item, index) => {
                                return (
                                    <div key={'log' + index}>{item.message}</div>
                                )
                            })
                        }
                    </div>
                    <div className="input absMiddle"><div>命令:</div>
                        <div className="inputBox"><input type="text" onChange={(e) => { e.persist(); this.setState({ execvalue: e.target.value }) }} value={execvalue} onBlur={() => { this.setState({ focus: false }) }} onFocus={() => { this.setState({ focus: true }) }} onKeyDown={this.exec} />{execvalue && focus ? <Icon onClick={e => { e.preventDefault(); this.setState({ execvalue: '' }) }} type="close-circle" /> : null}</div>

                    </div>
                </div>
                <div>
                    <div className="title absMiddle"><div className="lb absMiddle"></div><div className="absMiddle">输出</div></div>
                    <div className="logContent">
                        {
                            logs.map((item, index) => {
                                return (
                                    <div key={'log' + index}>{item.message}</div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    ({

    }) => {
        return {

        }
    },
    dispatch => ({
    })
)(commondLine)